<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div>
                    <el-button type="primary" @click="addDeptVisible = true">新增</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="创建日期">
                        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" v-model="param.betweenTime">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="部门名称：" label-width="100px">
                        <el-input placeholder="请输入关键词搜索" style="width: 200px; margin-left: 10px;"
                            v-model="param.departmentName">
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queryBtn">查询</el-button>
                        <el-button style="margin-left: 10px;" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div>
                    <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
                        <el-table-column prop="departmentName" label="部门名称" width="180"></el-table-column>
                        <el-table-column prop="departmentStatus" label="部门状态" width="180">
                            <template slot-scope="scope">
                                <span :style="{ color: scope.row.departmentStatus == 1 ? 'green' : 'red' }">
                                    {{ scope.row.departmentStatus == 1 ? '启用' : '停用' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
                        <el-table-column prop="operator" label="创建人" width="180"></el-table-column>
                        <el-table-column prop="remarks" label="备注"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="medium" @click="updateDeptBtn(scope.row)">编辑</el-button>
                                <el-button type="text" size="medium" @click="updateStatus(scope.row, 0)"
                                    :disabled="scope.row.departmentStatus == 0">停用</el-button>
                                <el-button type="text" size="medium" @click="updateStatus(scope.row, 1)"
                                    :disabled="scope.row.departmentStatus == 1">启用</el-button>
                                <el-button type="text" size="medium" @click="querySubDept(scope.row)">查询子部门</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <el-pagination background :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" :current-page="pageNum"
                    :total="total" layout="total,sizes,prev, pager, next,jumper" @next-click="nextPage"
                    @prev-click="prevPage" @current-change="changePage" @size-change="sizeChange">
                </el-pagination>
            </el-col>
        </el-row>
        <!--        //新增弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="新增部门" :visible.sync="addDeptVisible">
            <el-form>
                <el-form-item label="部门名称" label-width="80px">
                    <el-input v-model="addDept.departmentName"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="addDept.remarks"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDeptVisible = false">取 消</el-button>
                <el-button type="primary" @click="addDeptSave">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //新增弹框结束----------------------------------------------------------------------------------------------------->

        <!--        //修改弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="修改部门信息" :visible.sync="UpdateDeptVisible">
            <el-form>
                <el-form-item label="部门名称" label-width="80px">
                    <el-input v-model="updateDept.departmentName"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="updateDept.remarks"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="UpdateDeptVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUpdateDept">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //修改弹框结束----------------------------------------------------------------------------------------------------->

        <!--        //查询子部门弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="查询子部门" :visible.sync="querySubDeptVisible" width="70%">
            <el-button type="primary" @click="addSubDeptVisible = true">新增</el-button>
            <el-table :data="subDept" style="width: 100%; margin-top: 20px;">
                <el-table-column prop="subDepartmentName" label="部门名称" width="180"></el-table-column>
                <el-table-column prop="status" label="部门状态" width="180">
                    <template slot-scope="scope">
                        <span :style="{ color: scope.row.status == 1 ? 'green' : 'red' }">
                            {{ scope.row.status == 1 ? '启用' : '停用' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
                <el-table-column prop="operator" label="操作人"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="medium" @click="updateSubDeptBtn(scope.row)">编辑</el-button>
                        <el-button type="text" size="medium" @click="updateSubStatus(scope.row, 0)"
                            :disabled="scope.row.status == 0">停用</el-button>
                        <el-button type="text" size="medium" @click="updateSubStatus(scope.row, 1)"
                            :disabled="scope.row.status == 1">启用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div slot="footer">
                <el-button @click="querySubDeptVisible = false">取 消</el-button>
                <el-button type="primary">确 定</el-button>
            </div> -->
        </el-dialog>
        <!--        //查询子部门弹框结束----------------------------------------------------------------------------------------------------->

        <!--        //新增子部门弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="新增子部门" :visible.sync="addSubDeptVisible">
            <el-form>
                <el-form-item label="部门名称" label-width="80px">
                    <el-input v-model="addSubDept.subDepartmentName"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="addSubDept.remarks"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addSubDeptVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubDeptBtn">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //新增子部门弹框结束----------------------------------------------------------------------------------------------------->

        <!--        //修改子部门弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="新增子部门" :visible.sync="updateSubDeptVisible">
            <el-form>
                <el-form-item label="部门名称" label-width="80px">
                    <el-input v-model="updateSubDept.subDepartmentName"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="updateSubDept.remarks"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateSubDeptVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSubDeptSave">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //修改子部门弹框结束----------------------------------------------------------------------------------------------------->
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [],//部门表格对象
            subDept: [],//查询子部门表格对象
            param: { betweenTime: [] },//查询参数对象
            addDept: {},//添加部门对象
            updateDept: {},//修改部门对象
            addSubDept: {},//添加子部门对象
            updateSubDept: {},//修改子部门对象
            dept: {},
            querySubDeptVisible: false,//查询子部门弹窗控制
            addDeptVisible: false,//添加部门弹窗控制
            UpdateDeptVisible: false,//修改部门弹窗控制
            addSubDeptVisible: false,//添加子部门弹窗控制
            updateSubDeptVisible: false,//修改子部门弹窗控制
        }
    },

    methods: {
        nextPage(val) {//当前页
            //下一页
            this.pageNum = val
            this.queryAllDept()
        },
        prevPage(val) {//当前页
            //上一页
            this.pageNum = val
            this.queryAllDept()
        },
        changePage(val) {
            //跳转页
            this.pageNum = val
            this.queryAllDept()
        },
        sizeChange(val) {
            //改变每页条数
            this.pageNum = 1
            this.pageSize = val
            this.queryAllDept()
        },
        // ---------------------------------------------分页方法分割线------------------------------------------------------------------------
        queryBtn() {//点击查询按钮调用该方法
            this.pageNum = 1
            this.queryAllDept()
        },
        resetForm() { //重置按钮调用方法
            this.param = { betweenTime: [], departmentName: '' }
            this.queryAllDept()
        },
        queryAllDept() {//查询全部部门
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/dept/queryAllDept', pageParam)
                .then(resp => {
                    console.log(resp.data);
                    
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        querySubDept(val) {//根据部门id查询子部门
            this.addSubDept.departmentId = val.id
            this.$axios.post('api/dept/querySubDept', val)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.querySubDeptVisible = true
                        this.subDept = resp.data.data
                    }

                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        querySubDept2(val) {//根据部门id查询子部门
            this.$axios.post('api/dept/querySubDept', val)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.querySubDeptVisible = true
                        this.subDept = resp.data.data
                    }

                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        addDeptSave() {
            this.$axios.post('api/dept/addDept', this.addDept)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.addDeptVisible = false
                        this.queryBtn()
                        this.$message({
                            message: '新增成功',
                            type: 'success'
                        });
                    }
                    if (resp.data.code === 500) {
                        this.$message({
                            message: '已有该部门，如需添加请添加子部门',
                            type: 'error'
                        });
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        updateDeptBtn(val) {
            this.updateDept = JSON.parse(JSON.stringify(val));
            this.UpdateDeptVisible = true
        },
        saveUpdateDept() {
            this.$axios.post('api/dept/saveUpdateDept', this.updateDept)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.UpdateDeptVisible = false
                        this.queryBtn()
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        updateStatus(val, status) {
            const currentStatus = val.departmentStatus;
            const targetStatus = status;

            const message = targetStatus === 1 ? '是否启用该部门' : '是否停用该部门';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求

                this.$axios.post('api/dept/updateStatus', val)
                    .then(resp => {
                        console.log(resp.data);
                        if (resp.data.code === 200) {
                            this.$message.success(targetStatus == 1 ? '启用成功' : '停用成功');
                            this.queryAllDept();
                        }

                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        addSubDeptBtn() {
            this.$axios.post('api/dept/addSubDept', this.addSubDept)
                .then(resp => {
                    console.log(resp.data);
                    this.addSubDeptVisible = false
                    this.dept.id = this.addSubDept.departmentId
                    this.querySubDept2(this.dept)
                    this.$message({
                        message: '新增成功',
                        type: 'success'
                    });
                })
        },
        updateSubDeptBtn(val) {
            this.updateSubDept = JSON.parse(JSON.stringify(val));
            this.updateSubDeptVisible = true
        },
        updateSubDeptSave() {
            this.$axios.post('api/dept/updateSubDeptSave', this.updateSubDept)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.updateSubDeptVisible = false
                        this.dept.id = this.addSubDept.departmentId
                        this.querySubDept2(this.dept)
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        updateSubStatus(val, status) {
            const currentStatus = val.departmentStatus;
            const targetStatus = status;

            const message = targetStatus === 1 ? '是否启用该部门' : '是否停用该部门';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求

                this.$axios.post('api/dept/updateSubStatus', val)
                    .then(resp => {
                        console.log(resp.data);
                        if (resp.data.code === 200) {
                            this.$message.success(targetStatus == 1 ? '启用成功' : '停用成功');
                            this.dept.id = this.addSubDept.departmentId
                            this.querySubDept2(this.dept)
                        }

                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },

    },
    created() {
        this.queryAllDept()
    }
}
</script>

<style scoped></style>